<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/zepto.min.js"></script>
    <script src="js/touch.js"></script>
    <!-- 动画 -->
    <script src="js/fx.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        ul {
            list-style: none;

            /* transform: all 1s; */
        }

        ul li {
            float: left;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        ul li img {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
        </ul>
    </div>
    <script>
        var width = $("li").first().width();
        console.log(width);
        var lilen = $("li").length;
        console.log(lilen);
        $("ul").width(width * lilen);
        var index = 0;
        // 左滑
        $("ul").on("swipeLeft", function () {
            index++;
            if (index >= lilen) {
                index = 0;
            }
            $(this).animate({
                transform: 'translateX(-' + index * width + 'px)'
            })
        })
        //右滑
        $("ul").on("swipeRight", function () {
            index--;
            if (index < 0) {
                index = lilen - 1;
            }
            $(this).animate({
                transform: 'translateX(-' + index * width + 'px)'
            })
        })
        // 一、 zepto（ js库）

        // jQuery.js === > pc
        // zepto.js === > 移动端(轻量级)

        // 相同点：
        // api几乎差不多一样
        // 不同点：
        // 1》 事件不同
        // 2》 体积大小

        //     **
        //     ** ** 注意: 在移动端页面中使用click事件会有300毫秒的延迟
        // click === > tap
        // swipeLeft
        // swipeRight
        // swipeUp
        // swipeDown
    </script>
</body>

</html>